<template>
  <page-header-wrapper>
    <a-card>
      <a-form>
        <a-form-item>
          <a-input placeholder="请输入项目地址、客户名称、贷款顾问" style="width:30%" v-model="keyWord" />
          <a-button style="margin-left:20px;" type="primary" @click="search">查询</a-button>
          <a-button style="margin-left:40%" type="primary" @click="add" v-action:add>新增</a-button>
          <ListExport :keyWord="keyWord" :columns="columns" />
        </a-form-item>
      </a-form>

      <a-table
        rowKey="index"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :scroll="{ x: 1500, y: 400 }"
        @change="sorterFun"
      >
        <span slot="date" slot-scope="date"> {{ humanizeDate(date) }}</span>
        <span slot="calcDate" slot-scope="calcDate"> {{ humanizeDate(calcDate) }}</span>
        <span slot="amount" slot-scope="amount"> {{ moneyType(amount) }}</span>
        <span slot="status" slot-scope="_, record">
          <apprDialog :record="record"></apprDialog>
        </span>
        <span slot="file" slot-scope="_, record">
          <FileDialog :record="record" />
        </span>
        <span slot="operation" slot-scope="_, record">
          <a @click="toDetail(record)" v-action:get class="mr-2">查看</a>
          <a-popconfirm v-if="record.status != 2" title="确定删除吗" @confirm="() => onDelete(record.id)">
            <a href="javascript:;" v-action:delete>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getWithdraw, deleteWithdraw } from '@/api/common'
import moment from 'moment'
export default {
  name: 'Withdraw',
  components: {
    FileDialog: () => import('./FilaDialog.vue'),
    apprDialog: () => import('./apprDialog.vue'),
    ListExport: () => import('../com/withdrawExport.vue')
  },
  data() {
    return {
      columns: [
        {
          title: '项目编号',
          dataIndex: 'projectNum',
          key: 'projectNum',
          fixed: 'left',
          width: 130
        },
        {
          title: '项目地址',
          dataIndex: 'addr',
          key: 'addr',
          fixed: 'left',
          width: 110,
          sorter: true,
          sortDirections: ['ascend']
        },
        {
          title: '客户名称',
          dataIndex: 'clientName',
          key: 'clientName'
          // sorter: true,
          // sortDirections: ['ascend']
        },

        {
          title: '阶段',
          dataIndex: 'stage',
          key: 'stage'
        },
        {
          title: '律师',
          dataIndex: 'lawyerName',
          key: 'lawyerName'
        },
        {
          title: '提款日期',
          dataIndex: 'date',
          key: 'date',
          scopedSlots: { customRender: 'date' },
          width: 120,
          sorter: true,
          sortDirections: ['ascend']
        },
        {
          title: '计算日期',
          dataIndex: 'calcDate',
          key: 'calcDate',
          scopedSlots: { customRender: 'calcDate' },
          width: 120,
          sorter: true,
          sortDirections: ['ascend']
        },
        {
          title: '货币',
          dataIndex: 'currency',
          key: 'currency'
        },
        {
          title: '金额',
          dataIndex: 'amount',
          key: 'amount',
          scopedSlots: { customRender: 'amount' }
        },
        {
          title: '性质',
          dataIndex: 'nature',
          key: 'nature',
          scopedSlots: { customRender: 'nature' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' },
          filters: [
            { text: '等待中', value: 0 },
            { text: '进行中', value: 1 },
            { text: '完成', value: 2 },
            { text: '拒绝', value: 3 },
            { text: '待放款', value: 4 }
          ],
          filterMultiple: false
          // onFilter: (value, record) => record.status == value
        },
        {
          title: '文件上传',
          dataIndex: 'file',
          key: 'file',
          scopedSlots: { customRender: 'file' },
          fixed: 'right'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' },
          fixed: 'right'
        }
      ],
      data: [],
      current: 1,
      pagination: {
        total: 1,
        pageSize: 10
        // onChange: this.getData
      },
      keyWord: '',
      columnKey: '',
      status: null,
      sorterList: [
        { text: 'addr', value: 1 },
        { text: 'clientName', value: 2 },
        { text: 'date', value: 13 },
        { text: 'calcDate', value: 14 }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    add() {
      this.$router.push({ name: 'manage/withdrawRequest/add' })
    },
    search() {
      this.getData()
    },
    toDetail(record) {
      this.$router.push({ name: 'manage/withdrawRequest/add', query: { id: record.id, status: record.status } })
    },
    async onDelete(id) {
      await deleteWithdraw(id)
      this.$message.info('已删除')
      this.getData(this.current)
      this.getData()
    },
    humanizeDate(v) {
      return moment(v, 'X').format('YYYY-MM-DD') || '--'
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    sorterFun(pagination, filters, sorter) {
      // console.log(filters)
      this.status = filters.status?.[0] != null ? filters.status?.[0] : null
      // console.log(this.status)
      this.columnKey = this.sorterList.find(el => el.text == sorter.columnKey)?.value
      this.getData(pagination.current)
    },
    async getData(page = 1) {
      this.current = page
      const _form = {
        page,
        limit: this.pagination.pageSize
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      if (this.columnKey) {
        _form.orderType = this.columnKey
      }
      if (this.status != null) {
        _form.status = this.status
      }

      const res = await getWithdraw(_form)
      const data = res.result.data
      this.pagination.total = data.total
      this.data = data.list.map((el, i) => {
        el.index = i
        return el
      })
    }
  }
}
</script>
<style lang="css" scoped></style>
